"use strict";

var gl;
var points;

var NumTimesToSubdivide = 5;
var points = [];
var colors = [];

window.onload = function init()
{
    //创建WebGl上下文对象
    var canvas = document.getElementById("gl-canvas");
    gl = WebGLUtils.setupWebGL(canvas);

    if (!gl){
        alert("GG");
    }

    gl.viewport(0, 0, canvas.width, canvas.height);
    gl.clearColor(1.0, 1.0, 1.0, 1.0);

    //创建一个程序对象容器
    var program = initShaders(gl, "vertex-shader", "fragment-shader");  //初始化和绑定 定点着色器 片元着色器
                                                                        //定点着色器 片元着色器 是标准文本（字符串），在初始化时编译，并连接到程序对象中

    gl.useProgram(program);

    var vertices = [
        vec3(-1, 0, 0),
        vec3(0, 0, 0),
        vec3(0, 1, 0),
    ];

    var baseColors = [
        vec3(1.0, 0.0, 0.0),
        vec3(0.0, 1.0, 0.0),
        vec3(0.0, 0.0, 1.0),
    ];

    // points.push(vertices[0], vertices[1], vertices[2]);
    // colors.push(baseColors[0], baseColors[1], baseColors[2]);
    

    // var cBuffer = gl.createBuffer();
    // gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
    // gl.bufferData( gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW );

    // var vColor = gl.getAttribLocation( program, "vColor" );
    // gl.vertexAttribPointer( vColor, 3, gl.FLOAT, false, 0, 0 );
    // gl.enableVertexAttribArray( vColor );

    // var vBuffer = gl.createBuffer();
    // gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    // gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );

    // var vPosition = gl.getAttribLocation( program, "vPosition" );
    // gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 0, 0 );
    // gl.enableVertexAttribArray( vPosition );

    // 把顶点和颜色合并到一个buffer中通过vertexAttribPointer 设置失败 原因不明(原因已经查到了，drawArrays 使用了 length 导致绘制的顶点数传错了，数组的长度变了 但是顶点的个数还是3)
    points.push(vertices[0], baseColors[0], vertices[1], baseColors[1], vertices[2], baseColors[2]);
    // print_array(points)
    var vBuffer = gl.createBuffer();
    gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
    gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );
    
    var vPosition = gl.getAttribLocation( program, "vPosition" );
    gl.vertexAttribPointer( vPosition, 3, gl.FLOAT, false, 24, 0 );
    gl.enableVertexAttribArray( vPosition );

    var vColor = gl.getAttribLocation( program, "vColor" );
    gl.vertexAttribPointer( vColor, 3, gl.FLOAT, false, 24, 12);
    gl.enableVertexAttribArray( vColor );

    render();
}

//绘制图形

//绘制过程 必须经过 定点着色器（"vertex-shader"）和 片元着色器 （"fragment-shader"）
//定点着色器 把每一个顶点发送到GPU的光栅化模块中
//片元着色器 决定每一个决定的颜色

function render()
{
    gl.clear(gl.COLOR_BUFFER_BIT);                  //清理缓存

                                                    // 点 线 显示
    // gl.drawArrays(gl.POINTS, 0, points.length)   //点
    // gl.drawArrays(gl.LINES, 0, points.length)      //相邻2点连线
    // gl.drawArrays(gl.LINE_STRIP, 0, points.length)  // 第n点与n+1点连线
    // gl.drawArrays(gl.LINE_LOOP, 0, points.length)   //第n点与n+1点连线 最后n与1连线 闭合


                                                    // 多边形显示（三角形）
    // gl.drawArrays(gl.TRIANGLES, 0, points.length)   //相邻3点形成一个三角形
    gl.drawArrays(gl.TRIANGLES, 0, 3)   //相邻3点形成一个三角形

    // gl.drawArrays(gl.TRIANGLE_STRIP, 0, points.length)        //三角条带
    // gl.drawArrays(gl.TRIANGLE_FAN, 0, points.length)        //三角扇形

}

function print_array(arr, level){
    var level = level || 1;
    var indent_str = ""
    for (var i = 1; i < level; i ++)
    {
		indent_str = indent_str + "&nbsp&nbsp&nbsp&nbsp"
    }
    
    print_text(indent_str + '{<br>');
	for(var key in arr){
		if(typeof(arr[key])=='array'||typeof(arr[key])=='object'){//递归调用  
			print_array(arr[key], level + 1);
		}else{
            print_text(indent_str + "&nbsp&nbsp&nbsp&nbsp" + key + ' = ' + arr[key] + '<br>');
		}
    }
    print_text(indent_str + '}<br>');
}

function print_text(text){
    document.getElementById('text').innerHTML = document.getElementById('text').innerHTML + text;
}